<template>
  <div>
    <div class="video-thumbnail">
      <br>
      <video controls width="150" height="90" ref="videoRef" style="width: 100%;height: 50%">
        <source src="http://localhost:8000/upload/video/kunkun.mp4" type="video/mp4">
      </video>
    </div>
    <br>
    <div>
      <van-row>
        <van-col span="1"></van-col>
        <van-col span="22">
          <div style="background-color: #ffffff;border-radius: 30px;">
            <van-row>
              <van-col span="4">
                <van-image
                    round
                    width="5rem"
                    height="5rem"
                    :src="user.headimg"
                />
              </van-col>
              &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
              <van-col span="17">
                <br>
                {{ user.username }}&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                <button class="follow-button">关注</button>
                <br>
                {{ dateFormat(user.birthday) }}<br>来自:{{ user.address }}
                <br><br>
              </van-col>
            </van-row>
          </div>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="1"></van-col>
        <van-col span="22">
          <span style="color: #aaaaaa;">{{video.title}}</span>
        </van-col>
        <van-col span="1"></van-col>
      </van-row>
      <br>
      <van-row>
              <van-col span="1"></van-col>
              <van-col span="7">
                &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                分享
                &nbsp;&nbsp; &nbsp;&nbsp;
              </van-col>
              <van-col span="8">
                &nbsp;&nbsp; &nbsp;&nbsp;
                <van-icon name="chat-o" size="20px"/>
                665
                &nbsp;&nbsp; &nbsp;&nbsp;
              </van-col>
              <van-col span="7">
                &nbsp;&nbsp; &nbsp;&nbsp;
                <van-icon name="thumb-circle-o" size="20px"/>
                318
                &nbsp;&nbsp; &nbsp;&nbsp;
              </van-col>
              <van-col span="1"></van-col>
            </van-row>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";

let user = ref({})
const route = useRoute()
let video = ref({})
const videofindbyid = (id) => {
  axios.get(`user/videofindbyid/?id=` + id).then(res => {
    video.value = res.data.data
    user.value = res.data.data.user
  })
}
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}
onMounted(() => {
  let id = route.query.id
  videofindbyid(id)
})
</script>


<style scoped>
.video-thumbnail {
  position: relative;
  margin-left: 10px;
}

.follow-button {
  background-color: #ff5722; /* 橙色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 20px; /* 圆角，可根据实际情况调整 */
  padding: 8px 16px; /* 内边距，可调整按钮大小 */
  font-size: 14px; /* 文字大小 */
  width: 90px;
}
</style>